<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>通知消息模版</title>
    <meta name="decorator" content="default"/>
    <style>
        .sclay {
            position: absolute;
            padding: 20px;
            top: 100px;
            left: 200px;
            width: 800px;
            height: 400px;
            background-color: #fff;
            border-bottom: 1px solid grey;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.66), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
            display: none;
            overflow-y: scroll;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#value").focus();
            $("#inputForm").validate({
                submitHandler: function (form) {
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
        $(function () {
            if ($("#type").val() == "0") {
                $("#wechatTemplate_div").hide();
                $("#templateExample_div").hide();
                $("#tool").hide();
            } else {
                $("#wechatTemplate_div").show();
                $("#templateExample_div").show();
                $("#tool").show();
            }
            $("#type").change(function () {
                if ($(this).val() == "0") {
                    $("#wechatTemplate_div").hide();
                    $("#templateExample_div").hide();

                    $("#tool").hide();
                } else {
                    $("#wechatTemplate_div").show();
                    $("#templateExample_div").show();
                    $("#tool").show();
                }
            });
        })
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a href="${ctx}/business/messagetemplate">通知消息模版列表</a></li>
    <li class="active"><a
            href="${ctx}/business/messagetemplate/form?id=${messagetemplate.id}">通知消息模版<shiro:hasPermission
            name="business:messagetemplate:edit">${not empty messagetemplate.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission
            name="business:messagetemplate:edit">查看</shiro:lacksPermission></a></li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="messageTemplate" action="${ctx}/business/messagetemplate/save" method="post"
           class="form-horizontal">
    <form:hidden path="id"/>
    <tags:message content="${message}"/>
    <div class="control-group">
        <label class="control-label">模板名称:</label>
        <div class="controls">
            <form:input path="name" name="name" htmlEscape="false" maxlength="50" class="required"/>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">类型:</label>
        <div class="controls">
            <form:select path="type" name="type" class="input-medium required">
                <form:options items="${dic:getBusDictList('tb_message_template_type')}" itemLabel="label"
                              itemValue="value" htmlEscape="false"/>
            </form:select>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
    <div class="control-group" id="wechatTemplate_div" style="display: none">
        <label class="control-label">微信模板ID:</label>
        <div class="controls">
            <form:input path="weChatTemplateId" name="weChatTemplateId" htmlEscape="false" maxlength="50"
                        class="required"/>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
    <div class="control-group" id="templateExample_div">
        <label class="control-label">模板示例:</label>
        <div class="controls">
            <form:textarea path="templateExample" htmlEscape="false" rows="5"  class="input-xlarge"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">模板内容:</label>
        <div class="controls">
            <form:textarea path="templateContent" htmlEscape="false" rows="5"  class="input-xlarge"/>
                <%--<span class="help-inline"><font color="red">*</font> </span>--%>
            &nbsp;&nbsp;<input id="tool" class="btn btn-primary" style="display: none;" type="button" onclick="scopen()"
                               value="打开填写工具"/>
        </div>
    </div>
    <%--<div class="control-group">
        <label class="control-label">地区:</label>
        <div class="controls">
            <tags:treeselect id="areaId" name="areaId" value="${campPeriod.areaId}" labelName="areaName"
                             labelValue="${campPeriod.areaName}"
                             title="区域" url="/sys/area/treeData"/>
        </div>
    </div>--%>
    <div class="control-group">
        <label class="control-label">自定义属性名:</label>
        <div class="controls">
            <form:input path="attributeName" name="attributeName" htmlEscape="false" maxlength="50" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">自定义属性值:</label>
        <div class="controls">
            <form:input path="attributeValue" name="attributeValue" htmlEscape="false" maxlength="50" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">状态:</label>
        <div class="controls">
            <form:select path="status" name="type" class="input-medium required">
                <form:options items="${dic:getBusDictList('tb_message_template_status')}" itemLabel="label"
                              itemValue="value" htmlEscape="false"/>
            </form:select>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">是否可修改:</label>
        <div class="controls">
            <form:select path="editable" name="type" class="input-medium required">
                <form:options items="${dic:getBusDictList('tb_message_template_editable')}" itemLabel="label"
                              itemValue="value" htmlEscape="false"/>
            </form:select>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">接收人:</label>
        <div class="controls">
            <form:select path="receive" name="type" class="input-medium required">
                <form:options items="${dic:getBusDictList('tb_message_template_receive')}" itemLabel="label"
                              itemValue="value" htmlEscape="false"/>
            </form:select>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>


    <div class="control-group">
        <label class="control-label">备注:</label>
        <div class="controls">
            <form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200" class="input-xlarge"/>
        </div>
    </div>
    <div class="form-actions">
        <shiro:hasPermission name="business:messagetemplate:edit">
            <input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    </div>
</form:form>

<div id="addlay" class="sclay">
    <input class="btn btn-primary" type="button" onclick="scadd()" value="增加一行关键字"/>&nbsp;&nbsp;
    <input class="btn btn-primary" type="button" onclick="sctojson()" value="生成模版内容"/>&nbsp;&nbsp;
    <input class="btn btn-primary" type="button" onclick="scclose()" value="关 闭"/>
    <table class="table table-striped table-bordered table-condensed " style="margin-top: 20px;">
        <thead>
        <tr>
            <td>序列</td>
            <td>key</td>
            <td>value</td>
            <td>color</td>
        </tr>
        </thead>
        <tbody id="sctable">
        </tbody>
    </table>
    <script>
        var i = 0;
        function scclose() {
            $("#addlay").hide();
        }
        function scopen() {
            $("#addlay").show();
            if (i == 0) scadd();
        }
        function scadd() {
            i++;
            $("#sctable").append("<tr>" +
                "<td>" + i + "</td>" +
                "<td><input id='key" + i + "' class='input-medium' type='text'></td>" +
                "<td><textarea  id='val" + i + "' maxlength='200' class='input-xlarge' rows='2'></textarea></td>" +
                "<td><input id='col" + i + "' class='input-medium' type='text' value='#173177'></td>" +
                "</tr>");
        }
        function sctojson() {
            scclose();
            var jsons = "{\"templateId\":\"\${templateId}\",\"datas\": [";
            for (var k = 1; k <= i; k++) {
                var name = $("#key" + k).val();
                var value = $("#val" + k).val();
                var color = $("#col" + k).val();
                var str = "{\"name\":\"" + name + "\",\"value\":\"" + value + "\",\"color\":\"" + color + "\"}";
                jsons = jsons + str;
                if (k < i) jsons = jsons + ",";
            }
            jsons = jsons + "]}";
            $("#templateContent").val(jsons);
        }
//=================================================================
            //获取元素对象
            function g(id){
                return document.getElementById(id);
            }
            var mouseOffsetX = 0;//偏移
            var mouseOffsetY = 0;
            var isDraging = false;//是否拖拽的标记
            //鼠标按下
            g('addlay').addEventListener('mousedown',function(e){
                var e = e || window.event;
                mouseOffsetX = e.pageX - g('addlay').offsetLeft;
                mouseOffsetY = e.pageY - g('addlay').offsetTop;
                isDraging = true;
            })
            //鼠标移动
            document.onmousemove = function(e){
                var e = e || window.event;
                var mouseX = e.pageX;//鼠标当前位置
                var mouseY = e.pageY;
                var moveX = 0;// 浮层元素的新位置
                var moveY = 0;
                if(isDraging === true){
                    moveX = mouseX - mouseOffsetX;
                    moveY = mouseY - mouseOffsetY;
                    g('addlay').style.left = moveX + 'px';
                    g('addlay').style.top = moveY + 'px';
                }
            }
            //鼠标松开
            document.onmouseup = function(){
                isDraging = false;
            }
    </script>
</div>
</body>
</html>